<template>
  <div class="pieEchart">
    <div class="leftEchart" ref="pieEchart"></div>
    <div class="rightLegend">
      <div class="legendBox" v-for="(item, index) in pieData" :key="index">
        <div class="value">{{ item.value }}</div>
        <div class="label">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, inject, onMounted } from 'vue'
const echarts = inject('echarts')
const props = defineProps({
  pieData: Array
})
let pieEchart = ref(null)
let myEchart = null
let color1 = [
  'rgba(0, 198, 253, 1)',
  'rgba(255, 178, 0, 1)',
  'rgba(241, 254, 14, 1)',
  'rgba(255, 83, 60, 1)'
]
let color2 = [
  'rgba(0, 198, 253, 0.1)',
  'rgba(255, 178, 0,0.1)',
  'rgba(241, 254, 14,0.1)',
  'rgba(255, 83, 60,0.1)'
]
// let pieData = [
//   { name: 'xxxx', value: 40 },
//   { name: 'xxxx', value: 10 },
//   { name: 'xxxx', value: 25 },
//   { name: 'xxxx', value: 25 }
// ]
onMounted(() => {
  setPieEchart()
})
const setPieEchart = () => {
  let data1 = []
  let data2 = []
  props.pieData.forEach((item, index) => {
    data1.push({
      name: item.name,
      value: item.value,
      itemStyle: { color: color1[index], shadowColor: color1[index] },
      label: { color: color1[index] }
    })
    data2.push({
      name: item.name,
      value: item.value,
      itemStyle: { color: color2[index] },
      label: { color: color2[index] }
    })
  })
  if (myEchart != null && myEchart != '' && myEchart != undefined) {
    myEchart.dispose() //销毁
  }
  myEchart = echarts.init(pieEchart.value, null, { renderer: 'svg' })
  let option = {
    tooltip: {
      trigger: 'item',
      textStyle: {
        fontSize: 16 // 字体大小
      },
      formatter: '{b}: {d}%',
      // 显示百分比
      percent: true
    },
    series: [
      {
        type: 'pie',
        center: ['36%', '50%'], //修改圆心位置
        radius: ['58%', '70%'], ////设置饼图默认的展开样式
        label: {
          show: false
        },
        itemStyle: {
          borderRadius: 5,
          borderWidth: 5,
          shadowBlur: 5
        },
        emphasis: {
          // itemStyle: {
          //   borderWidth: 0,
          //   shadowBlur: 2,
          //   shadowOffsetX: 0,
          //   shadowColor: 'rgba(0, 0, 0, 0.5)'
          // },
          // hoverAnimation: false
          scale: false
        },
        data: data1
      },
      {
        // name: 'Access From',
        type: 'pie',
        radius: ['48%', '58%'],
        center: ['36%', '50%'], //修改圆心位置
        avoidLabelOverlap: false,
        label: {
          show: false //隐藏标示文字
        },
        labelLine: {
          show: false //隐藏标示线
        },
        tooltip: {
          show: false,
          trigger: 'none'
        },
        data: data2
      }
    ]
  }
  myEchart.setOption(option)
}
</script>
<style lang="scss" scoped>
.pieEchart {
  width: 300px;
  height: 300px;
  background-color: red;
  background: url('@/assets/images/secondpage/activity.png') no-repeat;
  background-size: 230px 227px;
  position: relative;
  .leftEchart {
    position: absolute;
    width: 300px;
    height: 500px;
    top: -137px;
    left: 6px;
  }
  .rightLegend {
    // text-align: center;
    // width: 400px;
    // height: 300px;
    // background-color: red;
    margin: 0px 0 0 240px;
    transform: translate(45px, 26px);
    .legendBox {
      position: relative;
      .value {
        font-size: 20px;
        font-weight: bold;
      }
      .label {
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
      }
      &::before {
        content: '';
        position: absolute;
        width: 39px;
        height: 16px;
        border-radius: 2px;
        top: 15px;
        left: -50px;
        background-color: #00c6fd;
      }
      &:nth-child(1) {
        color: #00c6fd;
      }
      &:nth-child(2) {
        color: #ffb200;
        &::before {
          background-color: #ffb200;
        }
      }
      &:nth-child(3) {
        color: #f1fe0e;
        &::before {
          background-color: #f1fe0e;
        }
      }
      &:nth-child(4) {
        color: #ff533c;
        &::before {
          background-color: #ff533c;
        }
      }
    }
  }
}
</style>
